<!doctypehtml>
<html lang=zh-CN>
<meta charset=UTF-8>
<meta content=width=device-width,initial-scale=1.0 name=viewport>
<title>智能汽车养护顾问App</title>
<script src=https://cdn.tailwindcss.com/3.4.16></script>
<script>tailwind.config = {darkMode: `class`}</script>
<link href=https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css rel=stylesheet>
<script src=https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.9.1/chart.min.js></script>
<style>@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap";

:root {
    --primary: #5e6ad2;
    --primary-light: #8a94e8;
    --secondary: #0c1e3f;
    --text-primary: #1a1a1a;
    --text-secondary: #6b7280;
    --bg-primary: #fff;
    --bg-secondary: #f9fafb;
    --border: #e5e7eb
}

.dark {
    --primary: #8a94e8;
    --primary-light: #5e6ad2;
    --secondary: #1e293b;
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --border: #374151
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: Noto Sans SC, sans-serif;
    transition: background-color .3s, color .3s
}

.card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    transition: all .3s
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px #0000001a, 0 10px 10px -5px #0000000a
}

.btn {
    transition: all .2s
}

.btn:hover {
    transform: scale(1.05)
}

.fade-in {
    opacity: 0;
    animation: .8s forwards fadeIn
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.delay-100 {
    animation-delay: .1s
}

.delay-200 {
    animation-delay: .2s
}

.delay-300 {
    animation-delay: .3s
}

.delay-400 {
    animation-delay: .4s
}

.delay-500 {
    animation-delay: .5s
}

.table-container {
    overflow-x: auto
}

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%
}

th, td {
    border-bottom: 1px solid var(--border);
    padding: 12px 16px
}

th {
    background-color: var(--bg-secondary);
    font-weight: 600
}

.progress-bar {
    background-color: var(--primary);
    border-radius: 4px;
    height: 8px;
    transition: width 1s ease-in-out
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary)
}

::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 4px
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary)
}</style>
<body class=min-h-screen>
<div class="container mx-auto px-4 py-8 max-w-6xl">
    <header class="flex justify-between items-center mb-10 fade-in"><h1
            class="text-3xl md:text-4xl font-bold text-center md:text-left">智能汽车养护顾问 <a class="btn bg-primary px-4 py-2 rounded-lg hover:bg-primary-light transition-colors" href="/apk/智能汽车养护顾问v1.0.0.apk" download>
        <i class="fas fa-download mr-2"></i> 下载APK
    </a></h1>
        <div class="flex items-center space-x-4">
            <button class="p-2 rounded-full bg-gray-100 dark:bg-gray-800 focus:outline-none" id=theme-toggle><i
                    class="fas fa-sun text-yellow-500 dark:hidden"></i> <i
                    class="fas fa-moon text-blue-300 hidden dark:block"></i></button>
        </div>
    </header>
    <main>
        <section class="mb-12 fade-in delay-100">
            <div class="card rounded-xl p-6 mb-6"><h2 class="text-2xl font-bold mb-4 flex items-center"><i
                    class="fas fa-chart-network mr-2 text-primary"></i> 核心问题解决能力图谱</h2>
                <p class="text-text-secondary mb-4">基于大模型的智能汽车养护顾问App可提供「全场景覆盖+精准诊断+主动服务」三位一体解决方案：
                <div class="table-container card">
                    <table>
                        <thead>
                        <tr>
                            <th>场景分类
                            <th>典型问题示例
                            <th>技术实现路径
                            <th>数据支撑来源
                        <tbody>
                        <tr>
                            <td class=font-medium>基础养护
                            <td>"特斯拉Model Y空调滤芯更换周期？"
                            <td>RAG+知识图谱匹配
                            <td>厂商手册+用户手册
                        <tr>
                            <td class=font-medium>故障诊断
                            <td>"仪表盘EPC灯亮如何处理？"
                            <td>多模态诊断（图像识别+OBD数据）
                            <td>维修案例库
                        <tr>
                            <td class=font-medium>驾驶优化
                            <td>"山区行驶刹车片损耗过快怎么办？"
                            <td>驾驶行为分析+预测模型
                            <td>车联网实时数据
                        <tr>
                            <td class=font-medium>政策服务
                            <td>"2025年新能源车年检新规解读"
                            <td>动态知识流接入
                            <td>政府公告系统
                        <tr>
                            <td class=font-medium>成本管理
                            <td>"10万公里理想L9保养总成本预估"
                            <td>配件价格矩阵+维修工时计算
                            <td>供应链数据库
                    </table>
                </div>
            </div>
        </section>
        <section class="mb-12 fade-in delay-200">
            <div class="card rounded-xl p-6 mb-6"><h2 class="text-2xl font-bold mb-4 flex items-center"><i
                    class="fas fa-question-circle mr-2 text-primary"></i> 智能提问技巧指南（用户侧）</h2>
                <div class=mb-8><h3 class="text-xl font-semibold mb-3">1. 精准提问公式</h3>
                    <div class="bg-blue-50 dark:bg-blue-900/30 p-4 rounded-lg mb-4"><code
                            class="block p-3 bg-white dark:bg-gray-800 rounded text-sm overflow-x-auto">[部件名称]+[异常现象]+[使用场景]
                        <br>示例："雨刮器（部件）异响（现象）且雨天刮不干净（场景）"</code></div>
                    <h4 class="font-medium mb-2">附加信息建议：</h4>
                    <ul class="list-disc pl-5 space-y-1">
                        <li>✓ 上传故障灯照片/异响录音
                        <li>✓ 补充里程数/上次保养时间
                        <li>✓ 说明近期路况（如涉水/沙尘）
                    </ul>
                </div>
                <div class=mb-8><h3 class="text-xl font-semibold mb-3">2. 多模态交互范式</h3>
                    <div class="table-container card">
                        <table>
                            <thead>
                            <tr>
                                <th>输入方式</th>
                                <th>最佳实践</th>
                                <th>大模型处理机制</th>
                            <tbody>
                            <tr>
                                <td>语音提问</td>
                                <td>"帮我检查刹车系统"</td>
                                <td>方言识别→专业术语转换</td>
                            </tr>
                            <tr>
                                <td>图片上传</td>
                                <td>拍摄仪表盘故障灯</td>
                                <td>CV定位异常代码</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div><h3 class="text-xl font-semibold mb-3">3. 进阶提问策略</h3>
                    <ul class=space-y-4>
                        <li class=flex>
                            <div class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-primary text-white rounded-full mr-3">
                                1
                            </div>
                            <div><span class=font-medium>对比式提问</span>
                                <p class="text-text-secondary mt-1">"磷酸铁锂与三元锂电池冬季保养差异" → 触发多方案比对
                            </div>
                        <li class=flex>
                            <div class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-primary text-white rounded-full mr-3">
                                2
                            </div>
                            <div><span class=font-medium>条件限定提问</span>
                                <p class="text-text-secondary mt-1">"预算2000元内，最优变速箱油更换方案" → 激活成本优化引擎
                            </div>
                        <li class=flex>
                            <div class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-primary text-white rounded-full mr-3">
                                3
                            </div>
                            <div><span class=font-medium>溯源式提问</span>
                                <p class="text-text-secondary mt-1">"扫描零件号A12345X查询正品渠道" → 调用区块链溯源系统
                            </div>
                    </ul>
                </div>
            </div>
        </section>
        <section class="mb-12 fade-in delay-300">
            <div class="card rounded-xl p-6 mb-6"><h2 class="text-2xl font-bold mb-4 flex items-center"><i
                    class="fas fa-robot mr-2 text-primary"></i> 常见问题智能应答机制（系统侧）</h2>

                <div class=mb-8><h3 class="text-xl font-semibold mb-3">1. 动态知识管理</h3>
                    <div class=space-y-4>
                        <div><h4 class="font-medium mb-2">双引擎更新机制</h4>
                            <ul class="list-disc pl-5 space-y-2">
                                <li><span class=font-medium>静态库：</span>整合3000+技术手册，建立标准化QA对
                                <li><span class=font-medium>动态流：</span>实时接入主机厂技术通告，每小时更新知识图谱
                            </ul>
                        </div>
                        <div><h4 class="font-medium mb-2">自优化系统</h4>
                            <p>用户纠错反馈→自动标注错误数据→触发模型再训练</div>
                    </div>
                </div>
                <div><h3 class="text-xl font-semibold mb-3">2. 服务转化漏斗</h3>
                    <div class="relative pl-8 pb-8">
                        <div class="absolute left-0 top-0 h-full w-0.5 bg-primary"></div>
                        <div class="relative mb-6">
                            <div class="absolute -left-8 top-0 w-6 h-6 rounded-full bg-primary flex items-center justify-center">
                                <span class="text-white text-xs font-bold">1</span></div>
                            <h4 class=font-medium>问题诊断</h4>
                            <p class="text-text-secondary mt-1">收集用户问题，初步分析</div>
                        <div class="relative mb-6">
                            <div class="absolute -left-8 top-0 w-6 h-6 rounded-full bg-primary flex items-center justify-center">
                                <span class="text-white text-xs font-bold">2</span></div>
                            <h4 class=font-medium>方案生成</h4>
                            <p class="text-text-secondary mt-1">基于大模型生成多维度解决方案</div>
                        <div class="relative mb-6">
                            <div class="absolute -left-8 top-0 w-6 h-6 rounded-full bg-primary flex items-center justify-center">
                                <span class="text-white text-xs font-bold">3</span></div>
                            <h4 class=font-medium>服务匹配</h4>
                            <p class="text-text-secondary mt-1">推荐附近门店及优惠活动</div>
                        <div class="relative">
                            <div class="absolute -left-8 top-0 w-6 h-6 rounded-full bg-primary flex items-center justify-center">
                                <span class="text-white text-xs font-bold">4</span></div>
                            <h4 class=font-medium>执行跟踪</h4>
                            <p class="text-text-secondary mt-1">提供维修进度实时更新</div>
                    </div>
                    <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/30 rounded-lg"><h4 class="font-medium mb-2">
                        每个环节嵌入「智能挽留点」：</h4>
                        <ul class="list-disc pl-5 space-y-1">
                            <li>方案页显示附近3家门店实时工位
                            <li>配件页提供正品二维码溯源
                            <li>支付前展示历史用户评价对比
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <section class="mb-12 fade-in delay-500">
            <div class="card rounded-xl p-6"><h2 class="text-2xl font-bold mb-4 flex items-center"><i
                    class="fas fa-chart-line mr-2 text-primary"></i> 效果验证与行业标杆</h2>
                <div class=mb-6>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="card p-4 rounded-lg">
                            <div class="flex items-center justify-between mb-2"><h4 class=font-medium>岚图汽车案例</h4>
                                <span class="text-primary font-bold">90%</span></div>
                            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
                                <div class="bg-primary h-2.5 rounded-full progress-bar" style=width:90%></div>
                            </div>
                            <p class="text-text-secondary text-sm mt-2">接入大模型后首次回答精准度</div>
                        <div class="card p-4 rounded-lg">
                            <div class="flex items-center justify-between mb-2"><h4 class=font-medium>小爱同学实践</h4>
                                <span class="text-primary font-bold">80%</span></div>
                            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
                                <div class="bg-primary h-2.5 rounded-full progress-bar" style=width:80%></div>
                            </div>
                            <p class="text-text-secondary text-sm mt-2">中长尾问题解决率提升</div>
                        <div class="card p-4 rounded-lg">
                            <div class="flex items-center justify-between mb-2"><h4 class=font-medium>腾讯座舱成果</h4>
                                <span class="text-primary font-bold">85%</span></div>
                            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
                                <div class="bg-primary h-2.5 rounded-full progress-bar" style=width:85%></div>
                            </div>
                            <p class="text-text-secondary text-sm mt-2">复杂问题解决率提升</div>
                    </div>
                </div>
                <div class="p-4 bg-green-50 dark:bg-green-900/30 rounded-lg"><h4 class="font-medium mb-2">
                    通过构建「智能提问-精准应答-服务闭环」的全新交互范式，该方案可实现：</h4>
                    <ul class="list-disc pl-5 space-y-2">
                        <li>✓ 用户提问转化率提升40%
                        <li>✓ 单次养护成本降低15%
                        <li>✓ 用户月活留存率增加25%
                    </ul>
                </div>
            </div>
        </section>
    </main>
    <footer class="mt-12 pt-6 border-t border-gray-200 dark:border-gray-800 text-center text-text-secondary text-sm">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0"><p>作者: 唐润辉</p></div>
            <div class="flex space-x-4">
                <a class="text-primary hover:text-primary-light transition-colors" href="#">
                    <i class="fab fa-weixin">aixiuke8</i>
                </a>
                <a class="text-primary hover:text-primary-light transition-colors" href="#">
                    <i class="fas fa-mobile"></i> 15999543193
                </a>
            </div>
        </div>
        <p class=mt-4>© 2025 智能汽车养护顾问     <a class="btn bg-primary px-4 py-2 rounded-lg hover:bg-primary-light transition-colors" href="/apk/智能汽车养护顾问v1.0.0.apk" download>
            <i class="fas fa-download mr-2"></i> 下载APK
        </a></p>


    </footer>
</div>
<script>const themeToggle = document.getElementById(`theme-toggle`);
if (window.matchMedia && window.matchMedia(`(prefers-color-scheme: dark)`).matches) {
    document.documentElement.classList.add(`dark`)
}
;themeToggle.addEventListener(`click`, () => {
    document.documentElement.classList.toggle(`dark`)
});
const observer = new IntersectionObserver(a => {
    a.forEach(a => {
        if (a.isIntersecting) {
            a.target.style.opacity = `1`;
            a.target.style.transform = `translateY(0)`
        }
    })
}, {threshold: 0.1});
document.querySelectorAll(`.fade-in`).forEach(a => {
    observer.observe(a)
})</script>
